<!-- 景点列表管理页面 -->
<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800">景点管理</h2>
      <button 
        @click="openAttractionModal(null)"
        class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all flex items-center"
      >
        <font-awesome-icon icon="plus" class="mr-2" />
        新增景点
      </button>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="bg-white p-6 rounded-xl shadow-md mb-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <SearchFilter 
          v-model="searchQuery"
          placeholder="搜索景点名称..."
        />
        <select 
          v-model="selectedCategory"
          class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
        >
          <option value="">全部分类</option>
          <option v-for="category in ATTRACTION_CATEGORIES" :key="category" :value="category">
            {{ category }}
          </option>
        </select>
        <select 
          v-model="selectedStatus"
          class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
        >
          <option value="">全部状态</option>
          <option v-for="status in ATTRACTION_STATUS" :key="status" :value="status">
            {{ status }}
          </option>
        </select>
        <button 
          @click="resetFilters"
          class="text-gray-600 hover:text-gray-800 flex items-center justify-center"
        >
          <font-awesome-icon icon="sync" class="mr-2" />
          重置筛选
        </button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">景点名称</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">评分</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="attraction in filteredAttractions" :key="attraction.id" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <img 
                    :src="attraction.imageUrl" 
                    class="h-10 w-10 rounded-lg object-cover mr-3"
                    :alt="attraction.name"
                  />
                  <div>
                    <div class="text-sm font-medium text-gray-900">{{ attraction.name }}</div>
                    <div class="text-sm text-gray-500">ID: {{ attraction.id }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">
                  {{ attraction.category }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <span class="text-yellow-400 mr-1">
                    <font-awesome-icon icon="star" />
                  </span>
                  <span class="text-sm text-gray-900">{{ attraction.rating }}</span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <StatusTag :status="getStatusMapping(attraction.status)" :label="attraction.status" />
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ formatDate(attraction.updatedAt) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-3">
                <button 
                  @click="openAttractionModal(attraction)"
                  class="text-blue-600 hover:text-blue-900"
                >
                  <font-awesome-icon icon="edit" class="mr-1" />
                  编辑
                </button>
                <button 
                  @click="confirmDelete(attraction)"
                  class="text-red-600 hover:text-red-900"
                >
                  <font-awesome-icon icon="trash" class="mr-1" />
                  删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="px-6 py-4 flex items-center justify-between border-t border-gray-200">
        <div class="flex-1 flex justify-between sm:hidden">
          <button
            @click="currentPage--"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          >
            上一页
          </button>
          <button
            @click="currentPage++"
            :disabled="currentPage === totalPages"
            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700">
              显示第 
              <span class="font-medium">{{ startIndex + 1 }}</span>
              至
              <span class="font-medium">{{ endIndex }}</span>
              条，共
              <span class="font-medium">{{ totalItems }}</span>
              条记录
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
              <button
                v-for="page in displayedPages"
                :key="page"
                @click="currentPage = page"
                :class="[
                  currentPage === page
                    ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
                    : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50',
                  'relative inline-flex items-center px-4 py-2 border text-sm font-medium'
                ]"
              >
                {{ page }}
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 景点编辑模态框 -->
  <AttractionModal
    v-model="showModal"
    :attraction="currentAttraction"
    :categories="ATTRACTION_CATEGORIES"
    :status-options="ATTRACTION_STATUS"
    @submit="handleAttractionSubmit"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import SearchFilter from '../ui/SearchFilter.vue'
import StatusTag from '../ui/StatusTag.vue'
import AttractionModal from '../ui/AttractionModal.vue'

// 常量定义
const ATTRACTION_CATEGORIES = ['文化古迹', '自然风光', '博物馆', '特色美食', '休闲娱乐']
const ATTRACTION_STATUS = ['已发布', '草稿', '待审核', '已下线']
const PAGE_SIZE = 10

// 状态管理
const searchQuery = ref('')
const selectedCategory = ref('')
const selectedStatus = ref('')
const currentPage = ref(1)
const showModal = ref(false)
const currentAttraction = ref(null)

// 模拟数据
const attractions = ref([
  {
    id: 1,
    name: '法门寺',
    category: '文化古迹',
    rating: 4.8,
    status: '已发布',
    imageUrl: '/images/attractions/famensi.jpg',
    updatedAt: '2024-03-15T10:30:00'
  },
  {
    id: 2,
    name: '太白山',
    category: '自然风光',
    rating: 4.9,
    status: '已发布',
    imageUrl: '/images/attractions/taishan.jpg',
    updatedAt: '2024-03-14T15:20:00'
  },
  {
    id: 3,
    name: '宝鸡博物馆',
    category: '博物馆',
    rating: 4.6,
    status: '已发布',
    imageUrl: '/images/attractions/museum.jpg',
    updatedAt: '2024-03-13T09:15:00'
  },
  {
    id: 4,
    name: '凤翔美食街',
    category: '特色美食',
    rating: 4.7,
    status: '已发布',
    imageUrl: '/images/attractions/food-street.jpg',
    updatedAt: '2024-03-12T14:45:00'
  },
  {
    id: 5,
    name: '陈仓古城',
    category: '文化古迹',
    rating: 4.5,
    status: '已发布',
    imageUrl: '/images/attractions/chencang.jpg',
    updatedAt: '2024-03-11T11:20:00'
  },
  {
    id: 6,
    name: '红河谷森林公园',
    category: '自然风光',
    rating: 4.4,
    status: '待审核',
    imageUrl: '/images/attractions/forest-park.jpg',
    updatedAt: '2024-03-10T16:30:00'
  },
  {
    id: 7,
    name: '大散关',
    category: '文化古迹',
    rating: 4.3,
    status: '草稿',
    imageUrl: '/images/attractions/dasanguan.jpg',
    updatedAt: '2024-03-09T13:25:00'
  },
  {
    id: 8,
    name: '茶店子滑雪场',
    category: '休闲娱乐',
    rating: 4.2,
    status: '已下线',
    imageUrl: '/images/attractions/ski.jpg',
    updatedAt: '2024-03-08T10:40:00'
  }
])

// 计算属性
const filteredAttractions = computed(() => {
  return attractions.value.filter(item => {
    const matchesSearch = item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesCategory = !selectedCategory.value || item.category === selectedCategory.value
    const matchesStatus = !selectedStatus.value || item.status === selectedStatus.value
    return matchesSearch && matchesCategory && matchesStatus
  })
})

const totalItems = computed(() => filteredAttractions.value.length)
const totalPages = computed(() => Math.ceil(totalItems.value / PAGE_SIZE))
const startIndex = computed(() => (currentPage.value - 1) * PAGE_SIZE)
const endIndex = computed(() => Math.min(startIndex.value + PAGE_SIZE, totalItems.value))

const displayedPages = computed(() => {
  const pages = []
  for (let i = 1; i <= totalPages.value; i++) {
    pages.push(i)
  }
  return pages
})

// 工具函数
const getStatusMapping = (status: string): 'active' | 'inactive' | 'pending' | 'blocked' => {
  const statusMap: Record<string, 'active' | 'inactive' | 'pending' | 'blocked'> = {
    '已发布': 'active',
    '草稿': 'inactive',
    '待审核': 'pending',
    '已下线': 'blocked'
  }
  return statusMap[status] || 'inactive'
}

const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 操作方法
const resetFilters = () => {
  searchQuery.value = ''
  selectedCategory.value = ''
  selectedStatus.value = ''
  currentPage.value = 1
}

const openAttractionModal = (attraction: any) => {
  currentAttraction.value = attraction
  showModal.value = true
}

const handleAttractionSubmit = (data: any) => {
  if (data.id) {
    // 更新现有景点
    const index = attractions.value.findIndex(item => item.id === data.id)
    if (index !== -1) {
      attractions.value[index] = {
        ...data,
        updatedAt: new Date().toISOString()
      }
    }
  } else {
    // 添加新景点
    attractions.value.push({
      ...data,
      id: attractions.value.length + 1,
      updatedAt: new Date().toISOString()
    })
  }
}

const confirmDelete = (attraction: any) => {
  if (confirm(`确定要删除景点"${attraction.name}"吗？`)) {
    const index = attractions.value.findIndex(item => item.id === attraction.id)
    if (index !== -1) {
      attractions.value.splice(index, 1)
    }
  }
}
</script>